<template>
  <div>
    <div v-for="(item,index) in notifierList" :key="index">
      <div class="emergency-title">报警联系人{{index+1}}</div>
      <van-cell-group>
        <van-field v-model="item.name" required clearable label="用户名" placeholder="请输入用户名" />
        <van-field v-model="item.mobile" clearable label="手机号" placeholder="请输入手机号" required />
      </van-cell-group>
    </div>
    <div class="operaiton-button">
      <van-button size="large" type="danger" :loading="isLoading" @click="submit">提交</van-button>
    </div>
  </div>

</template>

<script>
import { addNotifier } from "./../../api/shop";
export default {
  data() {
    return {
      shopInfo: {
        id: 0,
        alarmNotifier: ""
      },
      notifierList: [
        { name: "", mobile: "" },
        { name: "", mobile: "" },
        { name: "", mobile: "" },
        { name: "", mobile: "" },
        { name: "", mobile: "" }
      ],
      isLoading: false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.notifierList = [
      { name: "", mobile: "" },
      { name: "", mobile: "" },
      { name: "", mobile: "" },
      { name: "", mobile: "" },
      { name: "", mobile: "" }
    ];
    this.shopInfo = this.$route.query;
    if (this.shopInfo.alarmNotifier) {
      this.shopInfo.alarmNotifier.split("|").forEach((value, index) => {
        this.notifierList[index].name = value.split(",")[0];
        this.notifierList[index].mobile = value.split(",")[1];
      });
    }
  },
  activated() {},
  deactivated() {},
  methods: {
    async submit() {
      this.isLoading = true;
      let alarmNotifier = "";
      this.notifierList.forEach((value, index) => {
        if (value.name && value.mobile) {
          alarmNotifier += value.name + "," + value.mobile + "|";
        }
      });
      alarmNotifier = alarmNotifier.substr(0, alarmNotifier.length - 1);
      this.shopInfo.alarmNotifier = alarmNotifier;
      let res = await addNotifier(this.shopInfo);
      if (res.code === 0) {
        this.$toast.success('提交成功');
      } else {
        this.$toast.fail(res.msg);
      }
      this.isLoading = false;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.emergency-title {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: rgba(69, 90, 100, 0.6);
  padding: 20px 15px 15px;
}
</style>
